<template>
  <div>
    <!--    新增按钮-->
    <t-button @click="openDialog">新增护理项目</t-button>

    <SearchForm @onResetEmit="onReset" @onSubmitEmit="onSubmit"></SearchForm>

  </div>
  <!--  列表-->
  <TableList
      :tableData="data"
      :pagination="pagination"
      @pageChangeEmit="pageChange"
      @handleEditEmit="handleEdit"
      @handleDeleteEmit="handleDelete"
  ></TableList>

  <!--  新增和编辑的弹框-->
  <DialogForm
      :visible="visible"
      :data="formData"
      :projectList="projectList"
      @dialogCloseEmit="dialogClose"
      @onFormSubmitEmit="onFormSubmit"
  ></DialogForm>

  <!--删除弹框-->
  <DeleteDialog
      :visible="deleteVisible"
      @handleClose="handleDeleteClose"
      @handleDelete="handleDeleteClick"
  ></DeleteDialog>

</template>

<script lang="tsx" setup>
import {onMounted, ref} from 'vue'
import {MessagePlugin, TableProps} from 'tdesign-vue-next'
// @ts-ignore
import {searchProject} from './api/NursingPlantApi'
import TableList from './components/TableList.vue'
import DialogForm from "./components/DialogForm.vue";
import SearchForm from './components/SearchForm.vue'
import {
  deletePlan,
  searchPlan,
  queryAllProject,
  getNursingPlanDetail, addNursingPlan, updatePlanDetail
} from "@/pages/serve/plan/nurse/api/NursinigPlanApi";
import DeleteDialog from "@/components/OperateDialog/index.vue";
import {
  addNursingProject,
  deleteNursingProject,
  editNursingProject
} from "@/pages/serve/plan/project/api/NursingProjectApi";

const data = ref([])
const total = ref(28)
const visible = ref(false)
//控制删除的弹框
const deleteVisible = ref(false)
//接收点击删除后的id
const deleteId = ref(null)
const formData = ref({})

//project的列表
const projectList = ref([])

const openDialog = () => {
  queryAllProjects()
  visible.value = true
}

const handleEdit = async (id) => {
  //根据id查询数据回显到表单中
  const result = await getNursingPlanDetail(id)
  visible.value = true
  if (result.code === 200) {
    formData.value = result.data
    queryAllProjects()
    // title.value = '编辑护理项目'

  } else {
    MessagePlugin.error(result.msg)
  }
}

const dialogClose = () => {
  visible.value = false
}


//点击删除的按钮后
const handleDelete = (id) => {
  deleteVisible.value = true
  deleteId.value = id
}

//关闭删除的弹框
const handleDeleteClose = () => {
  deleteId.value = null
  deleteVisible.value = false
}

//点击确认删除后
const handleDeleteClick = async () => {
  const result = await deletePlan(deleteId.value)
  if (result.code === 200) {
    MessagePlugin.success("删除成功")
    handleDeleteClose()
    search()
  } else {
    MessagePlugin.error("删除失败")
  }
}


const pagination = ref({
  current: 1,
  pageSize: 5,
  total
})

const layout = ref('inline')

const searchFormData = ref({
  name: '',
  status: '',
});

// 页码发送改变触发
const pageChange = (pageInfo) => {
  pagination.value.current = pageInfo.current
  console.log(pageInfo)
  pagination.value.pageSize = pageInfo.pageSize
  search()
}
//查询请求
const search = async () => {
  const {name, status} = searchFormData.value
  const params = {
    page: pagination.value.current,
    pageSize: pagination.value.pageSize,
    status: searchFormData.value.status == null ? '' : searchFormData.value.status,
    name: searchFormData.value.name
    // status: status == null ? '' : searchFormData.value.status,
    // name
  }
  // 发送请求访问后端接口
  const result = await searchPlan(params)
  if (result.code === 200) {
    // 解析数据渲染页面
    data.value = result.data.records
    // 分页数据总条数
    total.value = result.data.total
  }
}

onMounted(() => {
  search()
})

const onReset = (formData) => {
  searchFormData.value = formData
  search()
};

const onSubmit = (formData) => {
  searchFormData.value = formData
  pagination.value.current = 1
  search()
};

// 提交新增和编辑的表单数据
const onFormSubmit = async (formData) => {



  let result = null
  if (formData.id) {
    //修改
    result = await updatePlanDetail(formData)
  } else {
    //新增
    result = await addNursingPlan(formData)
  }

  if (result.code === 200) {
    MessagePlugin.success('操作成功')
    // 隐藏弹框
    visible.value = false
    // 加载最新数据
    search()
  } else {
    MessagePlugin.error(result.msg)
  }
}

// 查询所有project 在编辑和新增时下拉框展示
const queryAllProjects = async () => {
  let result = await queryAllProject()
  console.log(result)
  if (result.code === 200) {
    result.data.forEach(item => {
      projectList.value.push({label: item.name, value: item.id});
    });
  }
}
</script>
